<template>
	<view class="credit-cont">
		<view class="credit-cont-head">
			<view class="credit-cont-head-limit">本期账单日</view>
			<view class="credit-cont-head-text">{{creditData.credit_due_date||0}}</view>
		</view>	
		<view class="credit-cont-list">
			<view class="credit-cont-list-page">
				<view class="credit-cont-list-page-text">还款</view>
				<view class="credit-cont-list-page-money"><text>￥</text>{{creditData.money||0}}</view>
				<view class="credit-cont-list-page-bill" v-if="creditData.next_bill > 0">
					<view class="credit-cont-list-page-bill-text">未出账单金额</view>
					<view class="credit-cont-list-page-bill-money">￥{{creditData.money||0}}</view>
				</view>
			</view>
		</view>
		<view class="credit-cont-btn" v-if="creditData.money > 0" @tap="showToggle('open')">立即还款</view>
		
		<uni-transition :mode-class="['fade']" :styles="maskClass" :show="transShow"/>
		<uni-transition :duration="500" :mode-class="['slide-bottom','fade']" :styles="transfromClass" :show="transShow">
			<view class="pay-box">
				<view @tap="showToggle('close')"><close class="pay-box-close" size="32" color="#535353"></close></view>
				<view class="pay-box-title">支付方式</view>
				<view class="pay-box-cont">
				    <view class="pay-box-cont-item" @tap="choosePay(item.type)" v-for="(item,index) in payList" :key="index">
						<view class="pay-box-cont-item-info">
							<image :src="item.icon_text"></image>
							<view class="pay-box-cont-item-info-text">{{item.name}}</view>
						</view>
						<view class="pay-box-cont-item-icon">
							<image :src="paytype == item.type ? '../../static/icons/pay-select-act.png' : '../../static/icons/pay-select.png'"></image>
						</view>
				    </view>
				</view>
				<view class="pay-box-btn" :class="{gay:!paytype}" @tap="pushOrder">确认</view>
			</view>
		</uni-transition>
		
	</view>
</template>

<script>
	import jewel from '@/common/common_zb.js';
	export default {
		data() {
			return {
				creditData:{},
				modeClass:['fade'],
				transShow:false,
				transfromClass: {
					'position': 'fixed',
					'bottom': 0,
					'top': 0,
					'left': 0,
					'right': 0,
					/* #ifndef APP-NVUE */
					'display': 'flex',
					/* #endif */
					'justify-content': 'center',
					'align-items': 'center',
					'z-index':11
				},
				maskClass: {
					'position': 'fixed',
					'z-index':9,
					'bottom': 0,
					'top': 0,
					'left': 0,
					'right': 0,
					'background-color': 'rgba(0, 0, 0, 0.4)'
				},
				payList:[],
				paytype:'',
			};
		},
		methods: {
			getData(){
				let that = this
				jewel.post('credit_bill/all_pay',{},true,function(res){
					uni.hideLoading()
					if(res.data.code == 0){
						that.creditData = res.data.data
					}
				})
			},
			pushOrder(){
				let that = this
				if(!that.paytype) return false
				that.showToggle('close')
				uni.showLoading({
					title:'支付中...',
					mask:true
				})
				jewel.post('credit_bill/pay',{paytype:that.paytype},true,function(res){
					let billdata = res.data
					setTimeout(()=>{
						uni.hideLoading()
						if(billdata.code == 0){
							uni.requestPayment({
								provider: that.paytype,
								orderInfo: billdata.data.pay_data.data, //微信、支付宝订单数据,
								success: (res) => {
									jewel.showToast(billdata.msg)
									that.getData()
								},
								fail: (res) => {
									console.log(JSON.stringify(res))
									jewel.showToast('支付失败');
								}
							})
						}else{
							jewel.showToast(billdata.msg)
						}
					},1000)
				})
			},
			showToggle(type){
				switch(type){
					case 'open':
						if(this.creditData.money > 0){
							this.transShow = true
						}
					break;
					case 'close':
						this.transShow = false
					break;
				}
			},
			choosePay(e){
				this.paytype = e
			},
		},
		onLoad() {
			let that = this
			uni.showLoading({
				title:'加载中...',
				mask:true
			})
			that.getData()
			jewel.post('Payment/payList',{repay:1},true,function(res){
				that.payList = res.data.data
			})
		}
	};
</script>

<style lang="scss" scoped>
	page{
		height: 100%;
		width: 100%;
	}
	.flex{
		display: flex;
	}
	.f-a-center{
		align-items: center;
	}
	.f-j-center{
		justify-content: center;
	}
	.credit-cont{
		&-head{
			background-color: #0aac2a;
			color: #FFFFFF;
			padding-left: 55rpx;
			height: 210rpx;
			padding-top: 30rpx;
			box-sizing: border-box;
			&-limit{
				font-size: 38rpx;
			}
			&-text{
				font-size: 38rpx;
			}
		}
		&-list{
			width: 710rpx;
			margin: 0 auto;
			margin-top: -50rpx;
			border-radius: 10rpx;
			background-color: #FFFFFF;
			&-page{
				box-shadow: 0rpx 7px 24rpx rgba(6,0,1,0.12);
				padding: 40rpx 0 30rpx 54rpx;
				border-radius: 10rpx;
				&-text{
					font-size: 34rpx;
				}
				&-money{
					font-size: 60rpx;
					padding-top: 10rpx;
					text{
						font-size: 38rpx;
					}
				}
				&-bill{
					display: inline-block;
					background-color: #e1f5e5;
					margin-top: 15rpx;
					padding: 5rpx{
						right: 100rpx;
						left: 30rpx;
					};
					border-radius: 10rpx;
					view{
						font-size: 28rpx;
						color: #3eb852;
					}
				}
			}
		}
		&-btn{
			width: 590rpx;
			margin: 0 auto;
			text-align: center;
			color: #FFFFFF;
			line-height: 88rpx;
			background-color: #0aac2a;
			font-size: 36rpx;
			border-radius: 50px;
			margin-top: 50rpx;
		}
	}
	.pay-box{
		z-index: 10;
		background-color: #FFFFFF;
		border-radius: 15px 15px 0 0;
		position: fixed;
		bottom: 0;
		width: 750rpx;
		left: 0;
		padding-top: 30rpx;
		padding-bottom: 40rpx;
		&-close{
			position: absolute;
			right: 26rpx;
			top: 30rpx;
			z-index: 11;
		}
		&-title{
			color: #252525;
			text-align: center;
			font-size: 38rpx;
			line-height: 122rpx;
		}
		&-btn{
			width: 636rpx;
			height: 94rpx;
			line-height: 94rpx;
			border-radius: 50px;
			margin: 0 auto;
			text-align: center;
			font-size: 40rpx;
			color: #FFFFFF;
			background-color: #0aac2a;
			margin-top: 36rpx;
		}
		&-cont{
			&-item{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 20rpx;
				&-info{
					display: flex;
					align-items: center;
					image{
						width: 74rpx;
						height: 74rpx;
					}
					&-text{
						font-size: 28rpx;
						margin-left: 20rpx;
					}
				}
				&-icon{
					image{
						width: 43rpx;
						height: 43rpx;
						display: block;
					}
				}
			}
		}
	}
	.gay{
		background-color: #cccccc !important;
		box-shadow: 0 -4rpx 13rpx rgba(204,204,204,0.54);
	}
</style>
